<script setup lang="ts">
  import { ref } from 'vue'
  import { userContactList } from '@/api/auth'
  const dataList = ref([])
  const paging = ref()
  const loadFun = (pageNo:number, pageSize:number) => {
    userContactList({pageNo,pageSize}).then(res => {
      if(res.code == 200){
        res.data.data.map((item:any) => {
          item.qrCode = JSON.parse(item.qrCode)
          return item
        })
        paging.value.complete(res.data.data)
      }else{
        paging.value.complete([])
      }
    }).catch(err => {
      paging.value.complete(false)
    })
  }
  const telClick = (phoneNumber:string) => {
    uni.makePhoneCall({phoneNumber})
  }

  const previewImage = (data:any) => {
    uni.previewImage({
      current:data.qrCode[0].fullUrl,
      urls:dataList.value.map((item:any) => {
        return item.qrCode[0].fullUrl
      })
    })
  }

</script>

<template>
  <z-paging ref="paging" class="contact-us" v-model="dataList" @query="loadFun">
    <template #top>
      <xx-title title="联系我们" :contact="false"/>
    </template>
    <view class="contact-body">
      <view class="contact-item" @click="previewImage(item)" v-for="item in dataList" :key="item.id">
        <view class="contact-image">
          <image :show-menu-by-longpress="true" mode="widthFix" :src="item.qrCode[0].fullUrl"/>
        </view>
<!--        <view class="contact-info">-->
<!--          <view class="contact-info-item">联系人：{{ item.name }}</view>-->
<!--          <view class="contact-info-item" @click="telClick(item.phone)">热线：{{item.phone}}</view>-->
<!--        </view>-->
      </view>
    </view>
  </z-paging>

</template>

<style scoped lang="scss">
.contact-us{
  width: 100%;
  min-height: 100vh;
  background-color: #F5F5F5;
  .contact-body{
    width: 100%;
    padding: 20rpx 0;
    box-sizing: border-box;
    display: grid;
    gap: 20rpx;
    grid-template-columns: repeat(2, calc(50% - 20rpx));
    .contact-item{
      width: 100%;
      background-color: #FFFFFF;
      padding: 20rpx;
      display: inline-block;
      border-radius: 8rpx;
      box-shadow: 0 0 5rpx #999999;
      &:nth-child(2n){
        margin-right: 0;
      }
      .contact-image{
        width: 100%;
        image{
          width: 100%;
        }
      }
      .contact-info{
        color: #505363;
        text-align: left;
        .contact-info-item{
          font-size: 28rpx;
          margin-top: 10rpx;
          &:last-child{
            color: #0c82ea;
          }
        }
      }
    }
  }
}
</style>
